<template>
	<view>
		<mescroll-uni @init="init" :down="downOption" @down="downCallback" :up="upOption" @scroll="scroll"
			@up="upCallback" :top="top">
			<slot />
		</mescroll-uni>
	</view>
</template>

<script>
	import MescrollUni from "@/uni_modules/mescroll-uni/mescroll-uni.vue";
	export default {
		name: 'UpDownLoad',
		components: {
			MescrollUni
		},
		props: {
			callback: {
				type: Function
			},
			top: {
				type: Number,
				default: 180
			},
			up: {
				type: Object,
				default: () => {
					return {}
				}
			}
		},
		data() {
			return {
				// 下拉刷新的常用配置
				downOption: {
					use: true, // 是否启用下拉刷新; 默认true
					auto: true, // 是否在初始化完毕之后自动执行下拉刷新的回调; 默认true
				},
				// 上拉加载的常用配置
				upOption: {
					onScroll: true,
					use: true, // 是否启用上拉加载; 默认true
					auto: true, // 是否在初始化完毕之后自动执行上拉加载的回调; 默认true
					page: {
						num: 0, // 当前页码,默认0,回调之前会加1,即callback(page)会从1开始
						size: 10 // 每页数据的数量,默认10
					},
					noMoreSize: 1, // 配置列表的总数量要大于等于5条才显示'-- END --'的提示
					empty: {
						tip: '暂无相关数据'
					}
				},
				mescroll: null
			}
		},
		created() {
			this.assiginObj(this.upOption, this.up)
		},
		methods: {
			init(mescroll) {
				this.mescroll = mescroll;
				this.$emit('init', mescroll)
			},
			downCallback(e) {
				// 第2种: 下拉刷新和上拉加载调同样的接口, 那以上请求可删, 直接用mescroll.resetUpScroll()代替
				this.mescroll.resetUpScroll(); // 重置列表为第一页 (自动执行 page.num=1, 再触发upCallback方法 )
			},
			scroll(e) {
				this.$emit('scrolls', e.scrollTop)
			},
			upCallback(mescroll) {
				this.callback(mescroll)
			},
			// 多层对象合并
			assiginObj(target = {}, sources = {}) {
				let obj = target;
				if (typeof target != 'object' || typeof sources != 'object') {
					return sources; // 如果其中一个不是对象 就返回sources
				}
				for (let key in sources) {
					// 如果target也存在 那就再次合并
					if (target.hasOwnProperty(key)) {
						obj[key] = assiginObj(target[key], sources[key]);
					} else {
						// 不存在就直接添加
						obj[key] = sources[key];
					}
				}
				return obj;
			},
		}
	}
</script>

<style lang="scss">
</style>
